import React, { useState } from "react";
import styles from "./DynamicForm1.less";
import { Form, Input, Button, Select } from "antd";
import ConditionInput from "./ConditionInput";

export default function DynamicForm1() {
  const [form] = Form.useForm();

  const options = [
    {
      value: "jack",
      label: "Jack",
    },
    {
      value: "lucy",
      label: "Lucy",
    },
    {
      value: "Yiminghe",
      label: "yiminghe",
    },
  ];

  const onValuesChange = (values) => {
    console.log("onValuesChange", values);
  };

  return (
    <div className={styles.DynamicForm1}>
      <Form form={form} initialValues={{}} onValuesChange={onValuesChange}>
        <Form.Item label="Field A" name="fieldA">
          <Input placeholder="input placeholder" />
        </Form.Item>
        <Form.Item label="Field B" name="fieldB">
          <Select options={options} />
        </Form.Item>
        <Form.Item label="Field C" name="fieldC">
          <ConditionInput />
        </Form.Item>
        <Form.Item>
          <Button type="primary">Submit</Button>
        </Form.Item>
      </Form>
    </div>
  );
}
